<template>
    <div id="consultChart" ref="consultChart" style="width: 100%;height: 60%;margin-top: 150px">
    </div>
</template>
<script>
import * as echarts from 'echarts/core';
import {GridComponent} from 'echarts/components';
import {LineChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
export default {
  name: "consultChart",
  props:{
    data:{

    }
  },
  methods: {
    createChart() {
      let option = {
        grid:{
          height:"500px"
        },
        xAxis: {
          type: 'category',
          data: ['计算机学院', '自动化学院', '机电工程学院', '外国语学院', '轻工化工学院', '音乐学院', '美术学院','数学学院','土木工程学院']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130,60,75],
            type: 'bar'
          }
        ]
      };
      option.series[0].data=this.data
      const consultChart = echarts.init(this.$refs.consultChart)
      consultChart.setOption(option);
    }
  },
  mounted() {
    this.createChart();
  },
  watch:{
    data(newVal, oldVal) {
      this.createChart()
    }

  }
}
</script>
<style lang="scss">
#consultChart{
  height: 1500px;
}
</style>
